<template>
	<div class="btn" @click="handleClick" :class="{primary: type === 'primary' , danger: type === 'danger'}">
	<slot></slot>
	</div>
</template>

<script>
	export default {
		
		//父组件传过来的class类名
		props: {
			type: String
		},
		
		
		data(){
			return {
			}
		},
		
		
		methods: {
			handleClick(e){
				this.$emit("click" , e)
			}
		}
	
	}
	
</script>

<style lang="less" scoped>
	.btn{
		height: 48px;
		width: 318px;
		border-radius: 24px;
		background-color: #cccccc;
		color: #666;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		margin: 80px auto;
	}
	
	.primary{
		background-color: green;
		color: white;
	}
	.danger{
		background-color: red;
		color: white;
	}
</style>